import React, { useRef, FC, forwardRef, useImperativeHandle, useState, useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import MyTable from '@/components/common/table'
import Metric from '@/api/metric'
import { modalLayoutLg } from '@/config/layout'
import { Button, Input, Select, Modal, DatePicker, Form } from 'antd';
import MyDefineSelect from '@/components/common/myDefineSelect'
import $axios from '@/utils/axios';
import { fn } from 'moment'
const {Option} = Select;
const { RangePicker } = DatePicker;
const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'index',
    key: 'index',
    width: '80px',
    fixed: 'left',
    render: (text, record, index) => {
      return index + 1
    }
  }
]
const CleanRole: FC = () => {
  const tableRef: RefType = useRef()
  const AddMComRef: RefType = useRef()
  
  const searchConfigList = [
    {
      key: 'keywords',
      slot: <Input placeholder="请输入关键字" allowClear />,
      rules: [],
      initialValue: ''
    },

    {
      key: 'date',
      slot: <RangePicker />,
      rules: [],
      initialValue: []
    },
  ];
  
  // 新增按钮
  const AddBtn = () => (
    <Button className="fr" onClick={add} type="primary">
      新增
    </Button>
  )
  // 添加
  const add = () => {
    AddMComRef.current.init()
  }
   // 添加
  const edit = (id) => {
    AddMComRef.current.init(id);
  }
  // 删除
  const del = (id:any) => {
    Modal.confirm({
      title: '确认删除？',
      
      onOk() {
        // Role.roleDel({
        //   roleid:record.roleid,
        //   isFormData:true
        // }).then(()=>{
        //   tableRef.current.update();
        // })
       
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  return (
    <>
      <div>
        {/* <BatchDel /> */}
        <AddBtn />
      </div>
      <MyTable
        apiFun={Metric.metricDefineList}
        columns={columns}
        ref={tableRef}
        searchConfigList={searchConfigList}
        extraProps={{ results: 10 }}

        beforeSearch={(val: any) => {
          // eslint-disable-next-line no-param-reassign
          console.log(val);
          if(val.date.length>0){
            val['st_time'] = val.date[0].format('YYYY-MM-DD');
            val['ed_time'] = val.date[1].format('YYYY-MM-DD');
          }
          // eslint-disable-next-line no-param-reassign
          return {}
        }} 
      />
      <AddMCom ref={AddMComRef} callback={() => {
        tableRef.current.update();
      }} />
    </>
  )
}
export default withRouter(CleanRole)

const AddM = (props, refs) => {

  const [form] = Form.useForm()
  // const [fileList,setfileList] = useState([]);
  const [measureClassData, setmeasureClassData] = useState([]);
  const { setFieldsValue, resetFields } = form
  const [code, setCode] = useState('')
  const [isModalVisible, setIsModalVisible] = useState(false);

  //显示弹窗
  const showModal = () => {
    setIsModalVisible(true);
  };
 
  //确定
  const handleOk = () => {
    form.validateFields().then((vals) => {
      const Obj = form.getFieldsValue()
      console.log(Obj);

    }).catch(info => {

    })
  };
  //取消
  const handleCancel = () => {
    setIsModalVisible(false);
    resetFields();
    props.callback && props.callback();
  };
  useImperativeHandle(refs, () => ({
    init: (id) => {
      if(id){
        getDetail(id);
      }else{
        resetFields();
      }
      showModal();
      // setfileList([]);
    }
  }))
  const getDetail = (id)=>{
    
  }
  return <Modal
    title={code === '' ? "新增" : '编辑'}
    visible={isModalVisible}
    onOk={handleOk}
    onCancel={handleCancel}
    centered={true}
    width={700}
    maskClosable={false}
    bodyStyle={{
      maxHeight: window.innerHeight - 150,
      overflowY: 'auto'
    }}
  >
    <Form form={form} {...modalLayoutLg}>
      
    </Form>
  </Modal>
}
const AddMCom = forwardRef(AddM);

